<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>欢迎来到{{school}}学习</h2>

    <!-- 绑定事件 标准方式 -->
    <!-- 直接调用没有 event 参数，Vue 帮你调用的时候才会传入 event 参数 -->
    <button v-on:click="show1()">点我弹出：信息1(v-on 绑定)</button><br/>
    <!-- 省略()，Vue 底层进行了判断，如果没有()则是一个函数变量，Vue会帮你调用该函数，如果加了()就直接执行 -->
    <button v-on:click="show1">点我弹出：信息1(省略())</button><br/>
    <!-- 简写形式 -->
    <button @click="show1">点我弹出：信息1(@ 绑定)</button><br/>

    <!-- 绑定事件 传递参数 -->
    <button @click="show2($event,666)">点我弹出：信息2 + 传递参数</button><br/>

    <!-- 绑定事件 手动阻止默认行为 -->
    <a href="https://www.bobomico.com/" @click="show3">点我弹出：信息3 (阻止默认行为)</a><br/>
    <!-- 绑定事件 利用事件修饰符阻止默认行为 -->
    <a href="https://www.bobomico.com/" @click.prevent="show3">点我弹出：信息3 (阻止默认行为)</a>
    <!-- 绑定事件 手动阻止冒泡 -->
    <div @click="show4">
        <button @click="show4">点我提示：信息4 (阻止冒泡)</button>
    </div>
    <!-- 绑定事件 利用事件修饰符阻止冒泡 -->
    <div @click="show4">
        <button @click.stop="show4">点我提示：信息4 (阻止冒泡)</button>
    </div>
    <!-- 绑定事件 利用.分隔符连写多个事件修饰符同时阻止默认行为和冒泡 -->
    <div @click="show4">
        <button @click.stop.prevent="show4">点我提示：信息4 (阻止冒泡)</button>
    </div>
    <!-- 绑定事件 手动判断键盘事件 -->
    <input @keyup="show5" type="text" placeholder="按下回车提示数据"><br/>
    <!-- 绑定事件 利用事件修饰符判断键盘事件 按键码(废弃了)和按键名都可以 -->
    <input @keyup.13="show5" type="text" placeholder="按下回车提示数据"><br/>

    <!-- 改变 tab 的行为 -->
    <!-- https://blog.csdn.net/weixin_28930033/article/details/117845214 -->
    <textarea @keyup="show5" name="" id="" cols="30" rows="10">
    </textarea>
</div>
<script>
    new Vue({
        el: "#root",
        // 配置数据
        // data 中可以写函数甚至使用，但是不推荐，因为 data 做了数据监控，写函数进去严重影响效率
        data: {
            school: "尚硅谷"
        },
        // 配置函数
        methods: {
            // this 指向 vm，因此可以直接读取到 vm 中的所有数据，当然包括 data 中的数据
            // 但是不能写成箭头函数，否则 this 就是 window 了
            show1(event) {
                // console.log(this.school);
                // 事件
                console.log(event.target.innerText);
                alert("信息1");
            },
            show2(event, number){
                alert("信息2---" + number);
                console.log(event)
            },
            show3(event){
                // event.preventDefault(); // 手动阻止默认行为
                alert("信息3")
            },
            show4(event){
                // event.stopPropagation(); // 手动阻止冒泡
                alert('信息4')
            },
            show5(event){
                // 输出按键码
                // console.log(event.keyCode);
                // 输出按键名
                // console.log(event.key); // 将大驼峰命名的按键名改为连字符命名法
                // if(event.keyCode !== 13) return; // 手动判断按键
                alert(event.target.value);
            }
        }
    });
</script>
</body>
</html>
